<template>
    <el-container>
        <el-header style="height:80px;">
            <div style="font-size:24px;color:#333333;text-align:left;margin-left:50px;margin-top:30px;">
                QA问答
            </div>
        </el-header>

        <el-main style="height:100%;width:100%;background-color:#f3f3f4">
            <div class="scroll-wrapper" ref="scroll" style="margin-top:100px;" >
            <div class="scroll-content">
                <chat-item
                    v-for="item in chatItems"
                    :key="item.message"
                    :type="item.type"
                    :message="item.message"
                    :timestamp="item.timestamp"
                    :from="item.from"
                ></chat-item>
            </div>
            </div>

            <el-input class="inputArea" v-model="question" :placeholder="placeholder" :disabled="inputDisable" :prefix-icon="inputIcon"></el-input>
            <el-button class="btn" @click="onSubmit">发送</el-button>

        </el-main>
    </el-container>

</template>

<script>
import axios from 'axios'
import icon_url from '@/assets/icon-2.png'
import chatItem from '@/components/chatItem'
import BScroll from "better-scroll"
import ObserveDOM from '@better-scroll/observe-dom'

BScroll.use(ObserveDOM)

export default {
    name:"QA",
    data() {
        return {
            question:'',
            bs:null,
            startY:0,
            inputIcon:"el-icon-question",
            inputDisable:false,
            placeholder:"请输入问题",
            chatItems:[{
                type:1,
                message:"您好，请输入想要咨询的问题!",
                from:2,
                timestamp: new Date()
            },],

        }

    },
    components: {
        "chat-item": chatItem,
    },

    mounted(){
        this.init();
    },
    beforeDestroy() {
        this.bs.destroy();
    },
    methods: {
        init() {
            this.startY= document.querySelector(".scroll-wrapper").clientHeight - this.$refs.scroll.scrollHeight;
            this.bs = new BScroll(this.$refs.scroll, {
                scrollY: true, // 上下滚动
                click: true,   // 开启点击事件
                startY: this.startY , // 初始高度
                mouseWheel: true,   // 鼠标滚动
                probeType: 3, // listening scroll hook
                observeDOM: true,
            });

        },
        getDom(){
            return new Promise((resolve, reject) => {
                let Lis = document.querySelectorAll("#msg");
                resolve(Lis);
            });
        },
        onSubmit(){
            if(this.question==''){
                alert("空文本！");
                return;
            }
            console.log(this.question);
            var ques = {"question": this.question};
            let Lis = document.querySelectorAll("#msg");
            console.log(Lis);
            var current_len = Lis.length;
            this.chatItems.push({
                type:1,
                message:this.question,
                from:1,
                timestamp: new Date()
            })

            this.inputIcon = "el-icon-loading";
            this.inputDisable = true;
            this.placeholder = "请稍等，正在思考您的问题..."

            // 清空输入框
            this.question = '';

            this.$nextTick(()=>{
                this.getDom().then(val =>{
                    this.bs.scrollToElement( val[val.length-1], 300 );
                    console.log("f3:",val[val.length-1]);
                })
            });

            axios.post("http://localhost:8000/get_answer/",this.$qs.stringify(ques),{
                headers: {
                    'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'
                }
            }).then(res => {
                var answer = res.data;
                this.chatItems.push({
                    type:1,
                    message:answer,
                    from:2,
                    timestamp: new Date()
                })
                this.$nextTick(()=>{
                    this.getDom().then(val =>{
                        console.log("f3-2:",val[val.length-1]);
                        console.log(this.bs);
                        this.bs.scrollToElement( val[val.length-1], 300);

                        this.inputIcon = "el-icon-check";
                        this.inputDisable = false;
                        this.placeholder = "解答完成了！请输入下一个问题"
                    })
                });
            });
    },



    },
}
</script>
<style scoped>
    .elaside{
        background-color: #2b3a49;
    }

    .main{
        background-color: #f3f3f4;
        margin-top:40px;
    }
    .main-container{
        position:absolute;
        height:100%;
        width:100%;
    }
    .tab-title{
        color:#fff;
    }
    .scroll-wrapper {
        height: 50%;
        width:60%;
        margin-left:20%;
        overflow: hidden;
    }
    .inputArea{
        width: 50%;
        height:30px;
        margin-top:20px;
    }
    .btn{
        margin-top:20px;
    }
</style>